<template>
    <div>
        <el-dialog title="添加" :visible.sync="visible" :before-close="conmel" width="1200px">
            <div class="botcenten">
                <div class="header">
                    <div class="header-box">
                        <span class="title-name">耗材名称 :</span>
                        <el-input class="handle-input" clearable placeholder="请输入内容" v-model="value"> </el-input>
                    </div>
                    <el-button type="primary" icon="el-icon-search" @click="seled">查询</el-button>
                    <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
                </div>
                <div>
                    <el-table :data="tableData" border class="table" ref="multipleTable"
                        header-cell-class-name="table-header" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column type="index" label="序号" width="60" align='center'>
                            <template slot-scope="scope">
                                {{ scope.$index + (query.pageNum - 1) * query.pageSize + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="consumName" label="物品名称" align='center'></el-table-column>
                        <el-table-column prop="consumStandard" label="规格型号" align='center'></el-table-column>
                        <el-table-column prop="consumNum" label="数量" align='center'></el-table-column>
                        <el-table-column prop="consumUnit" label="计量单位" align='center'></el-table-column>
                        <el-table-column prop="consumPrice" label="单价" align='center'></el-table-column>
                        <el-table-column prop="repositoryName" label="仓库" align='center'></el-table-column>
                    </el-table>
                </div>
                <div class="pagination">
                    <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                        :page-size="query.pageSize" :total="pageTotal"
                        @current-change="handlePageChange"></el-pagination>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="conmel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
import { outdetailByPage } from '../../../../api/index'
export default {
    name: "out-add-addlist",
    props: {
        visible: {
            type: Boolean,
            required: true
        }
    },
    watch: {

    },
    components: {
    },
    data() {
        return {

            value: '',//耗材名称
            query: {
                consumName: '',
                repositoryId: '',
                pageNum: 1,
                pageSize: 15,
            },
            pageTotal: 0,
            seletlist: [],
            tableData: [],


        }
    },
    mounted() {

    },
    methods: {
        //查询
        seled() {
            this.query.consumName = this.value
            this.query.pageNum = 1
            this.outdetailByPages()
        },
        // 重置
        reset() {
            this.query.consumName = ""
            this.value = ""

            this.query.pageNum = 1
            this.outdetailByPages()
        },
        open(e) {
            this.query.repositoryId = e
            this.outdetailByPages()
        },
        async outdetailByPages() {
            const data = await outdetailByPage(this.query)
            this.tableData = data.data.data.records
            this.pageTotal = data.data.data.total
        },
        submit() {
            this.$emit('selearr', this.seletlist)
            this.conmel()
        },
        conmel() {
            this.query.consumName = ""
            this.value = ""
            this.query.pageNum = 1

            this.$emit('closeadd')
        },
        handlePageChange(val) {
            this.query.pageNum = val
            this.outdetailByPages()

        },
        handleSelectionChange(e) {
            const arr = e.map(event => {
                return {
                    ...event,
                    consumNummax: event.consumNum // 在这里设置 max 属性的值，这里假设设置为 10
                };
            });
            this.seletlist = arr

        }
    }

}
</script>


<style lang="less" scoped>
.header {
    margin: 0 0 20px;
}

.header-box {
    display: inline-block;
}

.title-name {
    font-size: 14px;
    margin-right: 10px;
}

.handle-input {
    width: 220px;
    margin-right: 10px;
}
</style>